<template>
  <div>
    <!-- 访客建档 -->
    <el-card
      class="change_customer"
      :style="{
        'margin-top': marginTop + 'vh',
      }"
    >
      <el-descriptions title="基础信息" :column="1" class="basic_info" border>
        <el-descriptions-item label="姓名" align="left">
          {{ customerInfo.customerName }}
        </el-descriptions-item>
        <el-descriptions-item label="联系方式" align="leftleft">
          {{ customerInfo.customerTel }}
        </el-descriptions-item>
        <el-descriptions-item label="性别" align="left">
          {{ customerInfo.sex == 1 ? "男" : customerInfo.sex == 2 ? "女" : "" }}
        </el-descriptions-item>
        <el-descriptions-item label="出生日期" align="left">
          {{ $initTime(customerInfo.birthday) }}
        </el-descriptions-item>
        <el-descriptions-item label="地址" align="left">
          {{ customerInfo.address || "---" }}
        </el-descriptions-item>
      </el-descriptions>

      <template #footer>
        <div class="w-full flex justify-between">
          <el-button @click="handleBack">返回扫码或建档</el-button>
          <el-button type="primary" @click="handleNextStep">下一步</el-button>
        </div>
      </template>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useUserStore } from "@/pinia";
import { useRouter } from "vue-router";

onMounted(() => {
  marginTop.value = window.innerHeight / 100;
});

const useStore = useUserStore();
const router = useRouter();

const customerInfo = ref(useStore.customerInfo || {});

// 返回
const handleBack = () => {
  useStore.updateIsSelectCustomer(1);
};
// 下一步
const handleNextStep = () => {
  router.push({ name: "face_scan" });
};

// 根据屏幕尺寸，动态控制上边距
const marginTop = ref(7);
window.addEventListener("resize", () => {
  marginTop.value = window.innerHeight / 100;
});
</script>

<style scoped lang="scss">
.change_customer {
  @apply w-[90%] mx-auto;

  .basic_info {
    @apply w-full h-[50vh] py-[1rem] box-boeder;
  }
  .basic_info :deep(.el-descriptions__label) {
    @apply w-[6rem]  text-[0.7rem];
  }
  .basic_info :deep(.el-descriptions__content) {
    @apply text-[0.8rem];
  }

  :deep(.el-card__footer) {
    @apply py-[0.5rem];
  }
}
</style>